<template>
  <div class="dfd">
    <div class="mmbg" :style="{height: (screenHeight - 150) + 'px'}">
      <div class="part1">
        <Row style="text-align:left;padding-bottom:5px;">
          <Col span="6">
            <Input v-model="pageable.name_content_remark_plike" placeholder="姓名/账号/部门/邮箱/电话/地址" suffix="ios-search"
                   @on-enter="doQuery">
            </Input>
          </Col>
          <Col span="18" style="text-align:right;">
            <ButtonGroup>
              <Button type="primary" icon="ios-add-circle-outline" @click.native="newRole()">新增</Button>
            </ButtonGroup>
          </Col>
        </Row>
        <Table :columns="columns" :data="tables" @on-row-dblclick="rowClick"
               :loading="switches.tableLoading" size="small" ref="ttab"></Table>
        <Page :total="total" show-total :page-size="pageable.size" @on-change="pageChange" class="pagee"/>
      </div>
      <div class="part2">
        <Tabs type="card" @on-click="tabChange" v-model="showTabName">
          <TabPane label="关联用户" name="关联用户">
            <RoleUsers :id="curRole.id"></RoleUsers>
          </TabPane>
          <TabPane label="关联菜单" name="关联菜单">
            <RoleMenus :id="curRole.id" ref="menuPart"></RoleMenus>
          </TabPane>
          <TabPane label="其他" name="其他">待机状态....</TabPane>
        </Tabs>
      </div>
    </div>
    <Modal v-model="switches.roleModal" width="500">
      <p slot="header" style="text-align:left;">
        <span>{{editRole.id ? '编辑角色' : '新增角色'}}</span>
      </p>
      <div style="text-align:center">
        <Form ref="formValidate" :model="editRole" :rules="ruleValidate" :label-width="80">
          <FormItem label="名称" prop="name">
            <Input v-model="editRole.name" placeholder="角色名称"></Input>
          </FormItem>
          <FormItem label="标签内容" prop="content">
            <Input v-model="editRole.content" placeholder="角色标签内容"></Input>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="editRole.remark" placeholder="角色备注"></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" style="text-align: center">
        <Button type="primary" size="large" long :loading="switches.modal_loading" @click="doSaveRole">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import RoleUsers from './modules/RoleUsers'
  import RoleMenus from './modules/RoleMenus'
  export default {
    name: 'Role',
    components: {RoleUsers, RoleMenus},
    mounted: function () {
      this.loadRoles()
      // 原生获取屏幕高度...11
      this.screenHeight = document.body.clientHeight
    },
    data () {
      return {
        switches: {
          tableLoading: false,
          userTableLoading: false,
          roleModal: false,
          modal_loading: false
        },
        total: 0,
        showTabName: '关联用户',
        screenHeight: 0,
        tables: [],
        curRole: {},
        editRole: {},
        pageable: {
          size: 20,
          page: 0,
          name_content_remark_plike: ''
        },
        ruleValidate: {
          name: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ]
        },
        columns: [
          {
            title: 'ID',
            width: 50,
            align: 'center',
            key: 'id'
          },
          {
            title: '名称',
            align: 'center',
            ellipsis: true,
            tooltip: true,
            key: 'name'
          },
          {
            title: '内容',
            align: 'center',
            ellipsis: true,
            tooltip: true,
            key: 'content'
          },
          {
            title: '备注',
            align: 'center',
            ellipsis: true,
            tooltip: true,
            key: 'remark'
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'click': () => {
                      // 复制
                      this.editRole = JSON.parse(JSON.stringify(params.row))
                      this.switches.roleModal = true
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '删除确认',
                        content: '<p>确认要删除该角色吗？</p>',
                        onOk: () => {
                          this.del([params.row.id])
                        },
                        onCancel: () => {
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }

        ]
      }
    },
    methods: {
      loadRoles () {
        this.switches.tableLoading = true
        window.myapi.do_gett('$role/list', this.pageable).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.tables = resp.data.data.content
            this.tables[0]._highlight = true
            this.curRole = this.tables[0]
            this.total = resp.data.data.totalElements
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).finally(() => {
          this.switches.tableLoading = false
        })
      },
      newRole () {
        this.editRole = {}
        this.switches.roleModal = true
      },
      doSaveRole () {
        this.$refs['formValidate'].validate((valid) => {
          if (valid) {
            let url = this.editRole.id ? '$role/upd' : '$role/save'
            let method = this.editRole.id ? 'PUT' : 'POST'
            this.switches.modal_loading = true
            window.myapi.put_post(url, this.editRole, method).then(resp => {
              if (resp.status === 200 && resp.data.status === 200) {
                this.loadRoles()
                this.$Notice.success({
                  title: '提示',
                  desc: resp.data.msg
                })
                this.switches.roleModal = false
                this.editRole = {}
              } else {
                this.$Notice.error({
                  title: '提示',
                  desc: resp.data.msg
                })
              }
            }).finally(() => {
              this.switches.modal_loading = false
            })
          }
        })
      },
      del (params) {
        window.myapi.do_del('$role/del', params).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.loadRoles()
            this.$Notice.success({
              title: '提示',
              desc: resp.data.msg
            })
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).finally(() => {
        })
      },
      doQuery () {
        this.pageable.page = 0
        this.loadRoles()
      },
      tabChange (name) {
          if (name === '关联菜单') {
              this.$refs.menuPart.rebackTreeOriData()
          }
      },
      rowClick (row, index) {
        // 清空高亮
        this.$refs.ttab.clearCurrentRow()
        // 高亮当前行
        this.$refs.ttab.handleCurrentRow('highlight', index)
        this.curRole = row
      },
      pageChange: function (index) {
        this.pageable.page = index - 1
        this.loadRoles()
      }
    }
  }
</script>

<style scoped>
  .mmbg {
    padding: 5px;
    width: 100%;
    display: inline-flex;
  }

  /*第二部分的东西22*/
  .part1 {
    width: 40%;
    padding: 3px 5px 3px 3px;
  }

  .part2 {
    width: 58%;
    padding: 6px 3px 3px 20px;
    float: right;
  }

  .pagee {
    position: relative;
    margin-top: 10px;
    text-align: right;
  }
  .dfd{
    margin-top: -10px;
    padding: 3px;
  }
</style>
